<template>
    <el-form :inline="true">
        <p>选择日</p>
        <el-form-item>
        
            <span class="demonstration">默认</span>
            <el-date-picker v-model="value1"  align="left" type="date" placeholder="请选择日期"></el-date-picker>
        
        
            <span class="demonstration">带快捷选项</span>
            <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>
        
    </el-form-item>
    <p>其他日期单位</p>
    <div class="container">
        <div class="block">
            <span class="demonstration">周</span>
            <el-date-picker v-model="value1" type="week" format="yyyy 第 WW 周" placeholder="选择周"></el-date-picker>  
        </div>
        <div class="block">
            <span class="demonstration" >月</span>
            <el-date-picker v-model="value2" type="month" placeholder="选择月"></el-date-picker>
        </div>
    </div>
    <div class="container">
        <div class="block">
            <span class="demonstration">年</span>
            <el-date-picker v-model="value3" type="year" placeholder="选择年"></el-date-picker>
        </div>
        <div class="block">
            <span class="demonstration">多个日期</span>
            <el-date-picker type="dates" v-model="value4" placeholder="选择一个或多个日期"></el-date-picker>
        </div>
    </div>

    <p>选择日期范围</p>
    <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
    </div>
    <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
  </div>
    </el-form>
</template>

<script>  
  export default{
    data(){
        return{
            pickerOptions:{
                disabledDate(time){
                    return time.getTime()>Date.now();
                },
                shortcuts:[{
                    text:'今天',
                    onClick(picker){
                        picker.$emit('pick',new Date());
                    }
                },{
                    text:'昨天',
                    onClick(picker){
                        const date=new Date();
                        date.setTime(date.getTime()-3600*1000*24);
                        picker.$emit('pick',date);
                    }
                },{
                    text:'一周前',
                    onClick(picker){
                        const date=new Date();
                        date.setTime(date.getTime()-3600*1000*24*7);
                        picker.$emit('pick',date)
                    }
                },{
                    text: '最近一周',
                    onClick(picker) {
                      const end=new Date();
                      const start=new Date();
                      start.setTime(start.getTime()-3600*1000*24*7);
                      picker.$emit('pick',[start,end]);
                    }
                 },{
                    text: '最近一个月',
                    onClick(picker) {
                      const end=new Date();
                      const start=new Date();
                      start.setTime(start.getTime()-3600*1000*24*30);
                      picker.$emit('pick',[start,end]);
                    }
                },{
                    text: '最近三个月',
                    onClick(picker) {
                      const end=new Date();
                      const start=new Date();
                      start.setTime(start.getTime()-3600*1000*24*90);
                      picker.$emit('pick',[start,end]);
                    }
                }
            
            ]
            },
            value1:'',
            value2:'',
            value3:'',
            value4:'',

        }
    }
  }
</script>